<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交动态 - 手机展示页面</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 80px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #4285f4;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      color: white;
      font-size: 20px;
    }
    
    /* 内容容器 */
    .content-container {
      padding: 10px 0;
    }
    
    /* 动态卡片基础样式 */
    .feed-card {
      background-color: white;
      margin-bottom: 10px;
      border-radius: 8px;
      overflow: hidden;
    }
    
    /* 用户信息栏 */
    .user-info {
      display: flex;
      align-items: center;
      padding: 12px 15px;
    }
    
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .user-details {
      flex: 1;
    }
    
    .username {
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 2px;
    }
    
    .post-time {
      font-size: 12px;
      color: #999;
    }
    
    /* 动态内容 */
    .post-content {
      padding: 0 15px 12px 15px;
      font-size: 15px;
      line-height: 1.6;
    }
    
    /* 图片样式 - 无图片 */
    .no-image {
      /* 无图片时的额外边距 */
      padding-bottom: 12px;
    }
    
    /* 图片样式 - 单张图片 */
    .single-image {
      width: 100%;
      height: auto;
      display: block;
    }
    
    /* 图片样式 - 双张图片 */
    .two-images {
      display: flex;
      gap: 2px;
    }
    
    .two-images img {
      flex: 1;
      height: 200px;
      object-fit: cover;
    }
    
    /* 图片样式 - 三张图片 */
    .three-images {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 2px;
    }
    
    .three-images img {
      width: 100%;
      height: 120px;
      object-fit: cover;
    }
    
    /* 图片样式 - 四张图片 */
    .four-images {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
    }
    
    .four-images img {
      width: 100%;
      height: 150px;
      object-fit: cover;
    }
    
    /* 图片样式 - 多张图片（5张及以上） */
    .multiple-images {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 2px;
    }
    
    .multiple-images img {
      width: 100%;
      height: 120px;
      object-fit: cover;
    }
    
    .image-count-overlay {
      position: relative;
    }
    
    .image-count-overlay::after {
      content: attr(data-count);
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 4px 0 0 0;
    }
    
    /* 标签样式 */
    .post-tags {
      padding: 0 15px 10px 15px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .post-tag {
      padding: 3px 10px;
      background-color: #f0f2f5;
      color: #666;
      border-radius: 12px;
      font-size: 13px;
    }
    
    /* 交互按钮区 */
    .post-actions {
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      border-top: 1px solid #eee;
      margin: 0 15px;
    }
    
    .action-btn {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 14px;
      background: none;
      border: none;
      padding: 5px 15px;
    }
    
    .action-btn i {
      margin-right: 6px;
      font-size: 16px;
    }
    
    .action-btn.active {
      color: #4285f4;
    }
    
    /* 评论区 */
    .comments-section {
      background-color: #f9f9f9;
      padding: 10px 15px;
    }
    
    .comment-item {
      display: flex;
      margin-bottom: 10px;
    }
    
    .comment-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
      flex-shrink: 0;
    }
    
    .comment-content {
      flex: 1;
      background-color: white;
      padding: 8px 12px;
      border-radius: 16px;
      font-size: 14px;
    }
    
    .comment-username {
      font-weight: 600;
      margin-right: 5px;
    }
    
    /* 底部输入框 */
    .comment-input-container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      padding: 10px 15px;
      border-top: 1px solid #eee;
      z-index: 90;
    }
    
    .comment-input-group {
      display: flex;
      align-items: center;
    }
    
    .comment-input {
      flex: 1;
      padding: 10px 15px;
      border: 1px solid #ddd;
      border-radius: 20px;
      font-size: 14px;
      outline: none;
      resize: none;
      height: 40px;
    }
    
    .send-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background-color: #4285f4;
      color: white;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
    }
    
    /* 加载更多 */
    .load-more {
      text-align: center;
      padding: 15px;
      color: #4285f4;
      font-size: 15px;
      background-color: white;
      margin-bottom: 10px;
      cursor: pointer;
    }
    
    /* 骨架屏动画 */
    @keyframes skeleton-loading {
      0% { background-color: rgba(200, 200, 200, 0.1); }
      50% { background-color: rgba(200, 200, 200, 0.2); }
      100% { background-color: rgba(200, 200, 200, 0.1); }
    }
    
    .skeleton {
      animation: skeleton-loading 1.5s infinite;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav">
    <button class="btn btn-link p-0 nav-btn">
      <i class="fa fa-camera"></i>
    </button>
    <h1 class="nav-title">朋友圈</h1>
    <button class="btn btn-link p-0 nav-btn">
      <i class="fa fa-user-circle-o"></i>
    </button>
  </div>
  
  <!-- 内容区域 -->
  <div class="content-container container-fluid">
    <!-- 筛选导航 -->
    <div class="bg-white p-3 mb-2">
      <div class="nav nav-tabs justify-content-between" id="feedTabs" role="tablist">
        <button class="nav-link active" id="all-tab" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab" aria-controls="all" aria-selected="true">
          全部
        </button>
        <button class="nav-link" id="following-tab" data-bs-toggle="tab" data-bs-target="#following" type="button" role="tab" aria-controls="following" aria-selected="false">
          关注
        </button>
        <button class="nav-link" id="trending-tab" data-bs-toggle="tab" data-bs-target="#trending" type="button" role="tab" aria-controls="trending" aria-selected="false">
          热门
        </button>
        <button class="nav-link" id="nearby-tab" data-bs-toggle="tab" data-bs-target="#nearby" type="button" role="tab" aria-controls="nearby" aria-selected="false">
          附近
        </button>
      </div>
    </div>
    
    <!-- 标签页内容 -->
    <div class="tab-content" id="feedTabsContent">
      <!-- 全部动态 -->
      <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
        <!-- 无图片动态 -->
        <div class="feed-card">
          <div class="user-info">
            <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="avatar">
            <div class="user-details">
              <div class="username">李小明</div>
              <div class="post-time">10分钟前</div>
            </div>
            <button class="btn btn-link p-0 text-muted">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="post-content no-image">
            今天终于完成了项目的第一阶段开发！感谢团队的配合，大家辛苦了！接下来要继续加油，冲刺下一阶段的目标！💪
          </div>
          
          <div class="post-tags">
            <span class="post-tag">工作</span>
            <span class="post-tag">团队</span>
            <span class="post-tag">项目进展</span>
          </div>
          
          <div class="post-actions">
            <button class="action-btn">
              <i class="fa fa-thumbs-o-up"></i>
              <span>28</span>
            </button>
            <button class="action-btn">
              <i class="fa fa-comment-o"></i>
              <span>12</span>
            </button>
            <button class="action-btn">
              <i class="fa fa-share-alt"></i>
              <span>分享</span>
            </button>
          </div>
          
          <div class="comments-section">
            <div class="comment-item">
              <img src="https://picsum.photos/100/100?random=2" alt="评论者头像" class="comment-avatar">
              <div class="comment-content">
                <span class="comment-username">张小红</span>
                恭喜恭喜！太厉害了！
              </div>
            </div>
            <div class="comment-item">
              <img src="https://picsum.photos/100/100?random=3" alt="评论者头像" class="comment-avatar">
              <div class="comment-content">
                <span class="comment-username">王经理</span>
                团队合作的力量！继续保持！
              </div>
            </div>
          </div>
        </div>
        
        <!-- 单张图片动态 -->
        <div class="feed-card">
          <div class="user-info">
            <img src="https://picsum.photos/100/100?random=4" alt="用户头像" class="avatar">
            <div class="user-details">
              <div class="username">美食达人</div>
              <div class="post-time">1小时前</div>
            </div>
            <button class="btn btn-link p-0 text-muted">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="post-content">
            周末尝试了这家新开业的日料店，刺身非常新鲜，环境也很舒适！推荐给喜欢日料的朋友们~ 🍣
          </div>
          
          <div class="post-images">
            <img src="https://picsum.photos/800/500?random=10" alt="美食图片" class="single-image">
          </div>
          
          <div class="post-tags">
            <span class="post-tag">美食</span>
            <span class="post-tag">日料</span>
            <span class="post-tag">探店</span>
          </div>
          
          <div class="post-actions">
            <button class="action-btn">
              <i class="fa fa-thumbs-o-up"></i>
              <span>45</span>
            </button>
            <button class="action-btn">
              <i class="fa fa-comment-o"></i>
              <span>23</span>
            </button>
            <button class="action-btn">
              <i class="fa fa-share-alt"></i>
              <span>分享</span>
            </button>
          </div>
        </div>
        
        <!-- 两张图片动态 -->
        <div class="feed-card">
          <div class="user-info">
            <img src="https://picsum.photos/100/100?random=5" alt="用户头像" class="avatar">
            <div class="user-details">
              <div class="username">旅行者小A</div>
              <div class="post-time">3小时前</div>
            </div>
            <button class="btn btn-link p-0 text-muted">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="post-content">
            今天的徒步旅行真是太棒了！沿途风景如画，空气清新，整个人都放松了。#户外 #徒步 #自然
          </div>
          
          <div class="post-images two-images">
            <img src="https://picsum.photos/400/300?random=20" alt="风景图片1">
            <img src="https://picsum.photos/400/300?random=21" alt="风景图片2">
          </div>
          
          <div class="post-tags">
            <span class="post-tag">户外</span>
            <span class="post-tag">徒步</span>
            <span class="post-tag">自然</span>
          </div>
          
          <div class="post-actions">
            <button class="action-btn">
              <i class="fa fa-thumbs-o-up"></i>
              <span>37</span>
            </button>
            <button class="action-btn">
              <i class="fa fa-comment-o"></i>
              <span>15</span>
            </button>
            <button class="action-btn">
              <i class="fa fa-share-alt"></i>
              <span>分享</span>
            </button>
          </div>
        </div>
        
        <!-- 三张图片动态 -->
        <div class="feed-card">
          <div class="user-info">
            <img src="https://picsum.photos/100/100?random=6" alt="用户头像" class="avatar">
            <div class="user-details">
              <div class="username">摄影师小B</div>
              <div class="post-time">5小时前</div>
            </div>
            <button class="btn btn-link p-0 text-muted">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="post-content">
            城市夜景拍摄练习，尝试了不同的曝光时间和角度，大家觉得哪张最好看？
          </div>
          
          <div class="post-images three-images">
            <img src="https://picsum.photos/300/300?random=30" alt="夜景图片1">
            <img src="https://picsum.photos/300/300?random=31" alt="夜景图片2">
            <img src="https://picsum.photos/300/300?random=32" alt="夜景图片3">
          </div>
          
          <div class="post-tags">
            <span class="post-tag">摄影</span>
            <span class="post-tag">夜景</span>
            <span class="post-tag">城市</span>
          </div>
          
          <div class="post-actions">
            <button class="action-btn">
              <i class="fa fa-thumbs-o-up"></i>
              <span>63</span>
            </button>
            <button class="action-btn">
              <i class="fa fa-comment-o"></i>
              <span>28</span>
            </button>
            <button class="action-btn">
              <i class="fa fa-share-alt"></i>
              <span>分享</span>
            </button>
          </div>
        </div>
        
        <!-- 四张图片动态 -->
        <div class="feed-card">
          <div class="user-info">
            <img src="https://picsum.photos/100/100?random=7" alt="用户头像" class="avatar">
            <div class="user-details">
              <div class="username">生活家小C</div>
              <div class="post-time">昨天</div>
            </div>
            <button class="btn btn-link p-0 text-muted">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="post-content">
            周末整理了阳台花园，种了新的多肉植物，看起来还不错吧？#绿植 #多肉 #阳台花园
          </div>
          
          <div class="post-images four-images">
            <img src="https://picsum.photos/300/300?random=40" alt="多肉图片1">
            <img src="https://picsum.photos/300/300?random=41" alt="多肉图片2">
            <img src="https://picsum.photos/300/300?random=42" alt="多肉图片3">
            <img src="https://picsum.photos/300/300?random=43" alt="多肉图片4">
          </div>
          
          <div class="post-tags">
            <span class="post-tag">绿植</span>
            <span class="post-tag">多肉</span>
            <span class="post-tag">阳台花园</span>
          </div>
          
          <div class="post-actions">
            <button class="action-btn">
              <i class="fa fa-thumbs-o-up"></i>
              <span>41</span>
            </button>
            <button class="action-btn">
              <i class="fa fa-comment-o"></i>
              <span>19</span>
            </button>
            <button class="action-btn">
              <i class="fa fa-share-alt"></i>
              <span>分享</span>
            </button>
          </div>
        </div>
        
        <!-- 多张图片动态（5张以上） -->
        <div class="feed-card">
          <div class="user-info">
            <img src="https://picsum.photos/100/100?random=8" alt="用户头像" class="avatar">
            <div class="user-details">
              <div class="username">时尚博主</div>
              <div class="post-time">2天前</div>
            </div>
            <button class="btn btn-link p-0 text-muted">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="post-content">
            春季新品试穿，分享几套适合日常的搭配，大家喜欢哪一套？#春季穿搭 #时尚 #日常搭配
          </div>
          
          <div class="post-images multiple-images">
            <img src="https://picsum.photos/300/300?random=50" alt="穿搭图片1">
            <img src="https://picsum.photos/300/300?random=51" alt="穿搭图片2">
            <img src="https://picsum.photos/300/300?random=52" alt="穿搭图片3">
            <img src="https://picsum.photos/300/300?random=53" alt="穿搭图片4">
            <img src="https://picsum.photos/300/300?random=54" alt="穿搭图片5">
            <div class="image-count-overlay" data-count="+3">
              <img src="https://picsum.photos/300/300?random=55" alt="穿搭图片6">
            </div>
          </div>
          
          <div class="post-tags">
            <span class="post-tag">春季穿搭</span>
            <span class="post-tag">时尚</span>
            <span class="post-tag">日常搭配</span>
          </div>
          
          <div class="post-actions">
            <button class="action-btn">
              <i class="fa fa-thumbs-o-up"></i>
              <span>87</span>
            </button>
            <button class="action-btn">
              <i class="fa fa-comment-o"></i>
              <span>45</span>
            </button>
            <button class="action-btn">
              <i class="fa fa-share-alt"></i>
              <span>分享</span>
            </button>
          </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="load-more" id="loadMore">
          <i class="fa fa-spinner fa-spin"></i> 加载更多动态
        </div>
      </div>
      
      <!-- 关注动态 -->
      <div class="tab-pane fade" id="following" role="tabpanel" aria-labelledby="following-tab">
        <div class="p-5 text-center">
          <i class="fa fa-user-plus text-gray-400" style="font-size: 48px;"></i>
          <p class="mt-3 text-gray-500">关注更多好友，查看他们的动态</p>
        </div>
      </div>
      
      <!-- 热门动态 -->
      <div class="tab-pane fade" id="trending" role="tabpanel" aria-labelledby="trending-tab">
        <div class="p-5 text-center">
          <i class="fa fa-fire text-gray-400" style="font-size: 48px;"></i>
          <p class="mt-3 text-gray-500">热门内容加载中...</p>
        </div>
      </div>
      
      <!-- 附近动态 -->
      <div class="tab-pane fade" id="nearby" role="tabpanel" aria-labelledby="nearby-tab">
        <div class="p-5 text-center">
          <i class="fa fa-map-marker text-gray-400" style="font-size: 48px;"></i>
          <p class="mt-3 text-gray-500">请开启位置权限，查看附近的动态</p>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部评论输入框 -->
  <div class="comment-input-container">
    <div class="comment-input-group">
      <textarea class="comment-input" placeholder="说点什么..."></textarea>
      <button class="send-btn">
        <i class="fa fa-paper-plane"></i>
      </button>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 点赞功能
    document.querySelectorAll('.action-btn').forEach(btn => {
      if (btn.querySelector('.fa-thumbs-o-up') || btn.querySelector('.fa-thumbs-up')) {
        btn.addEventListener('click', function() {
          const icon = this.querySelector('i');
          const countEl = this.querySelector('span');
          
          if (countEl && !countEl.textContent.includes('分享')) {
            let count = parseInt(countEl.textContent);
            
            if (icon.classList.contains('fa-thumbs-o-up')) {
              icon.classList.remove('fa-thumbs-o-up');
              icon.classList.add('fa-thumbs-up');
              this.classList.add('active');
              countEl.textContent = count + 1;
            } else {
              icon.classList.remove('fa-thumbs-up');
              icon.classList.add('fa-thumbs-o-up');
              this.classList.remove('active');
              countEl.textContent = count - 1;
            }
          }
        });
      }
    });
    
    // 加载更多功能
    document.getElementById('loadMore').addEventListener('click', function() {
      const spinner = this.querySelector('i');
      const originalText = this.innerHTML;
      
      // 模拟加载中状态
      spinner.classList.add('fa-spin');
      
      // 模拟网络请求延迟
      setTimeout(() => {
        // 创建新的动态卡片（无图片类型）
        const newPost = document.createElement('div');
        newPost.className = 'feed-card skeleton';
        newPost.innerHTML = `
          <div class="user-info">
            <div class="avatar" style="background-color: #f0f0f0;"></div>
            <div class="user-details">
              <div class="username" style="height: 18px; width: 80px; background-color: #f0f0f0;"></div>
              <div class="post-time" style="height: 12px; width: 100px; background-color: #f0f0f0;"></div>
            </div>
          </div>
          <div class="post-content no-image" style="height: 60px; background-color: #f0f0f0;"></div>
          <div class="post-actions">
            <div style="height: 20px; width: 50px; background-color: #f0f0f0;"></div>
            <div style="height: 20px; width: 50px; background-color: #f0f0f0;"></div>
            <div style="height: 20px; width: 50px; background-color: #f0f0f0;"></div>
          </div>
        `;
        
        // 插入到加载更多按钮之前
        this.parentNode.insertBefore(newPost, this);
        
        // 停止旋转动画
        spinner.classList.remove('fa-spin');
        
        // 检查是否需要显示"没有更多内容"的提示
        const feedCards = document.querySelectorAll('.feed-card');
        if (feedCards.length > 10) {
          this.innerHTML = '<i class="fa fa-check"></i> 没有更多内容了';
          this.style.color = '#999';
          this.style.cursor = 'default';
          this.removeEventListener('click', arguments.callee);
        }
      }, 1500);
    });
    
    // 发送评论功能
    document.querySelector('.send-btn').addEventListener('click', function() {
      const input = document.querySelector('.comment-input');
      const commentText = input.value.trim();
      
      if (commentText) {
        // 在实际应用中，这里会发送评论到服务器
        alert('评论已发送：' + commentText);
        input.value = '';
      }
    });
    
    // 点击图片查看大图（在实际应用中会打开图片查看器）
    document.querySelectorAll('.post-images img').forEach(img => {
      img.addEventListener('click', function() {
        alert('查看大图功能 - 实际应用中会打开图片查看器');
      });
    });
  </script>
</body>
</html>
